<!--
 * @Author: 一品网络技术有限公司
 * @Date: 2022-07-08 14:26:03
 * @LastEditTime: 2024-03-28 15:09:56
 * @FilePath: \client\src\components\global\ypeditor\ypeditor.vue
 * @Description:
 * 联系QQ:58055648
 * Copyright (c) 2022 by 东海县一品网络技术有限公司, All Rights Reserved.
 * https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/vuejs-v3.html#using-es6-modules
-->
<template>
	<div id="app">
		<ckeditor :editor="editor" v-model="editorData" :config="editorConfig" @input="onEditorInput"></ckeditor>
	</div>
</template>

<script setup>
	import CKEditor from '@ckeditor/ckeditor5-vue'
	import Editor from 'ckeditor5-custom-build/build/ckeditor'
	import { ref } from 'vue'

	const ckeditor = CKEditor.component
	const props = defineProps({
		modelValue: { default: '' }
	})

	const editor = Editor
	const editorConfig = {
		language: 'zh-cn',
		toolbar: {
			items: [
				'undo',
				'redo',
				'bold',
				'italic',
				'underline',
				'alignment',
				'|',
				'fontBackgroundColor',
				'fontColor',
				'fontFamily',
				'fontSize',
				'|',
				'bulletedList',
				'numberedList',
				'outdent',
				'indent',
				'|',
				'link',
				'blockQuote',
				'insertTable',
				'strikethrough',
				'subscript',
				'superscript',
				'removeFormat',
				'findAndReplace'
			]
		},
		image: {
			toolbar: [
				'imageTextAlternative',
				'toggleImageCaption',
				'imageStyle:inline',
				'imageStyle:block',
				'imageStyle:side',
				'linkImage'
			]
		},
		table: {
			contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties', 'tableProperties']
		},
		link: {
			addTargetToExternalLinks: true
		},
		removePlugins: ['Heading', 'Title']
	}

	const emits = defineEmits(['update:modelValue'])
	const editorData = ref(props.modelValue)
	const onEditorInput = () => {
		emits('update:modelValue', editorData)
	}
</script>

<style>
	.ck-editor__editable_inline {
		@apply h-[300px];
	}
	.ck-powered-by-balloon {
		@apply !hidden;
	}
	.ck-content ul,
	.ck-content ol {
		@apply pl-4;
	}
</style>
